<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>AFNI HEAD/BRIK format</title>
    <link rel="stylesheet" href="niivue.css" />
    <style>
      .unstyled-button {
        border: none
        padding: 0
        background: #202020
        color: white
      }
    </style>
  </head>
  <body>
    <header>
      <button class="unstyled-button">Normalize Graph</button>
      <input
        onclick="checkClick(this)"
        type="checkbox"
        id="check1"
        value="true"
      />
      <button id="prevVolume">back</button>
      <button id="nextVolume">forward</button>
      &nbsp;<button id="animate">animate</button>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer id="volume">volume: 0</footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js"

  var volumeList1 = [
    // for AFNI head/brik files we need to explicitly specify BOTH
    {
      url: "../images/example4d+orig.HEAD", //"./images/RAS.nii.gz", "./images/spm152.nii.gz",
      urlImgData: "../images/example4d+orig.BRIK.gz",
      colormap: "gray",
      opacity: 1,
      visible: true,
    },
  ]
  var nv1 = new niivue.Niivue({
    onFrameChange: updateFrameValue,
  })
  nv1.setRadiologicalConvention(false)
  await nv1.attachTo("gl1")
  nv1.loadVolumes(volumeList1)
  nv1.setSliceType(nv1.sliceTypeMultiplanar)
  nv1.graph.autoSizeMultiplanar = true
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
  nv1.graph.normalizeValues = false
  nv1.graph.opacity = 1.0
  check1.onchange = function () {
    nv1.graph.normalizeValues = this.checked
    nv1.updateGLVolume()
  }
  let currentVol = 0
  prevVolume.onclick = function () {
    currentVol = Math.max(currentVol - 1, 0)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
    document.getElementById("volume").innerHTML = "volume " + currentVol
  }
  function updateFrameValue(volume, index) {
    document.getElementById("volume").innerHTML = "volume " + index
    currentVol = index
  }
  nextVolume.onclick = function () {
    currentVol++
    currentVol = Math.min(currentVol, nv1.getFrame4D(nv1.volumes[0].id) - 1)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
    document.getElementById("volume").innerHTML = "volume " + currentVol
  }
  var animationTimer = null
  function doAnimate() {
    currentVol++
    if (currentVol >= nv1.volumes[0].nFrame4D) currentVol = 0
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  animate.onclick = function () {
    if (animationTimer == null) animationTimer = setInterval(doAnimate, 100)
    else {
      clearInterval(animationTimer)
      animationTimer = null
    }
  }
</script>
